<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        今日目标
            宽度自适应 重点
            高度自适应 重点
            最大最小宽度
            最大最小高度
            高度塌陷   重点
            伪对象 部分
            iframe
            BFC的概念
     -->
     <!-- 
        宽度自适应（块元素）
            width:100%（父元素有多高，子元素就有多宽）或者width不写
                区别：
                    width:100%+左右的padding+左右的border
                    width:不写（包含左右的padding+左右的border）
            

        屏幕的宽
            1600px
            1440px
            1920px
            1366px
            1530px
        


      -->
      <style>
          *{padding:0; margin: 0;}
          .nav{
              width:100%;
              height:100px;
              background:red;
              display: inline-block;
            
          }
          .box{
              width:1000px;
              height: 50px;
              background: yellow;
              margin: 0 auto;
          }
          ul{
              height:20px; background: pink;
          }
          ul li{
             
              height: 20px; background: blue;
              text-align: center;
          }
          span{
              padding:0 10px;
              border:solid 2px red;
          }
      </style>
</head>
<body>
    <div class="nav">
        <div class="box">
            <ul>
                <li>你好</li>
            </ul>
           <span>美丽</span>
        </div>

    </div>
    
</body>
</html>